<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title th:text="${webinfo.webname}"></title>
    <link rel="icon" th:href="'/images/'+${webinfo.webicon}"/>
    <!--bootstrap3 cdn-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--font-awesome-->
    <link rel="stylesheet" href="/style/css/font-awesome.min.css"/>
    <!--layui-->
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="/style/css/pushbar.css"/>
    <script src="/script/js/pushbar.js"></script>
    <!--自定义样式css-->
    <link rel="stylesheet" href="/style/theme/default/main.css"/>
    <link rel="stylesheet" href="/style/theme/default/style.css"/>
    <!--js-->
    <script src="/script/js/me.js"></script>
    <style type="text/css">

    </style>
    <script language="javascript">

    </script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-expand-md">
        <div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"><span
                        class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span></button>
                <a class="navbar-brand" href="javascript:void(0);"> <span> <img th:src="'/images/'+${webinfo.brandimg}"
                                                                                class="img-circle"
                                                                                style="height: 30px;width: 30px"/> </span>
                    <span th:text="${webinfo.webname}"></span> </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="homepage();">首页</a>
                    </li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="category();">分类</a>
                    </li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="archive();">归档</a></li>
                    <li class="navli"><a class="navbar-link current" href="javascript:void(0);"
                                         onclick="whisper();">微语</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="album();">相册</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="me();">关于</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="link();">友链</a></li>
                    <li>
                        <form class="navbar-form" action="artical" method="post">
                            <input type="text" name="keyword" class="form-control" placeholder="请输入关键字（回车搜索）"/>
                        </form>
                    </li>
                    <li class=""><a href="javascript:void(0);" id="music" title="来点音乐"><i class="fa fa-music"></i></a>
                    </li>
                    <li class=""><a href="javascript:void(0);" id="manage" title="后台"><i
                            class="layui-icon layui-icon-website"></i></a></li>
                    <li class="layui-hide-xs"><a href="javascript:void(0);" target="_blank" title="换肤"><i
                            class="layui-icon layui-icon-theme" id="skin"></i></a></li>
                    <th:block th:if="${session.userinfo} != null">
                        <li class=""><a href="javascript:void(0);"><cite th:text="${session.userinfo.nickname}"></cite></a>
                        </li>
                    </th:block>
                    <li class=""><a href="javascript:void(0);" data-pushbar-target="right"><i
                            class="layui-icon layui-icon-more-vertical"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <aside data-pushbar-id="right" class="pushbar from_right">
        <div class="title">
            <span data-pushbar-close="" class="close push_right"></span> Right
        </div>
    </aside>
    <div class="content whisper-content layui-anim layui-anim-upbit">
        <div class="cont">
            <div class="whisper-list">
                <div class="item-box" th:each="whisper : ${whispers}">
                    <div class="item">
                        <div class="whisper-title">
                            <i class="fa fa-calendar"></i>
                            <span th:text="${whisper.createtime}"></span>
                        </div>
                        <p class="text-cont" th:text="${whisper.content}">
                        </p>
                        <div class="img-box">
                            <img src="/images/wy_img2.jpg"/>
                            <img src="/images/wy_img3.jpg"/>
                            <img src="/images/wy_img4.jpg"/>
                        </div>
                        <div class="op-list">
                            <p class="like"><i class="fa fa-thumbs-up"></i><span>1200</span></p>
                            <p class="edit"><i class="fa fa-commenting"></i><span th:text="' '+${whisper['mcount']}">1200</span>
                            </p>
                            <p class="off"><span>展开</span><i class="layui-icon layui-icon-down"></i></p>
                        </div>
                    </div>
                    <div class="review-version layui-hide">
                        <div class="form">
                            <img src="/images/header2.png"/>
                            <form class="layui-form" action="">
                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block">
                                        <textarea name="desc" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="text-align: right;">
                                        <button class="layui-btn definite">確定</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="list-cont">
                            <div class="cont" th:each="message :${whisper['messages']}">
                                <div class="img">
                                    <img th:src="'/images/'+${message['PROPHOTO']}"
                                         style="height: 50px;width: 50px;border-radius: 50%"
                                         th:title="${message['NICKNAME']}"/>
                                </div>
                                <div class="text">
                                    <p class="tit">
                                        <span class="name" th:text="${message['NICKNAME']}"></span>
                                        <span class="data" th:text="${message['CREATETIME']}"></span>
                                    </p>
                                    <p class="ct" th:text="${message['CONTENT']}"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div id="demo" style="text-align: center;"></div>
        </div>
    </div>
    <script type="text/html" id="laytplCont">
        <div class="cont">
            <div class="img">
                <img src="{{d.avatar}}" alt="">
            </div>
            <div class="text">
                <p class="tit"><span class="name">{{d.name}}</span><span class="data">2018/06/06</span></p>
                <p class="ct">{{d.cont}}</p>
            </div>
        </div>
    </script>
    <!--<div class="footer-wrap">
         <div class="footer w1000">
             <div class="qrcode">
                 <img src="/images/erweima.jpg">
             </div>
             <div class="practice-mode">
                 <img src="/images/down_img.jpg">
                 <div class="text">
                     <h4 class="title">我的联系方式</h4>
                     <p>微信<span class="WeChat">1234567890</span></p>
                     <p>手机<span class="iphone">1234567890</span></p>
                     <p>邮箱<span class="email">1234567890@qq.com</span></p>
                 </div>
             </div>
         </div>
     </div>-->
    <script type="text/javascript">
        layui.config({
            base: '/script/js/util/'
        }).use(['element', 'laypage', 'form', 'menu'], function () {
            element = layui.element, laypage = layui.laypage, form = layui.form, menu = layui.menu;
            laypage.render({
                elem: 'demo'
                , count: 70 //数据总数，从服务端得到
            });
            menu.init();
            menu.off();
            menu.submit()
        })
    </script>
</div>
</body>
</html>